<template>
  <div class="chat-item">
    <div class="collapse-item" v-for="item in profileShowList" :key="item.id">
      <div class="profile-item" @click="handleCollapse(item)">
        <div class="profile-header">
          <div class="profile-info">
            <div class="profile-avatar">
              <el-image class="avatar ng-star-inserted" alt="Avatar" :src="item.photo" style="width: min(3.42857rem, 2.5vw); height: min(3.42857rem, 2.5vw);" />
              <div class="profile-status">
                <div :class="['profile-status-value', item.online ? 'online' : 'offline']" ></div>
              </div>
            </div>
            <div class="profile-name">{{ item.name }}</div>
          </div>
          <i v-if="item.isCollapse" class="el-icon-arrow-down"></i>
          <div v-else class="profile-control" background="transparent" v-loading="item.loading">
            {{ item.type === 'CHAT' ? item.chatList.length : item.mailList.length }}
          </div>
        </div>
      </div>
      <div class="profile-body" v-if="!item.isCollapse">
        <div class="tab" style="background-color: #0e222e">
          <div @click="handleChangeType(item, 'CHAT')" :class="['tab-item', item.type === 'CHAT' ? 'active' : '']">
            <img style="margin: 0.2rem" class="svg-icon height_28px" src="@/assets/chats.svg" alt="">
            Chat
          </div>
          <div @click="handleChangeType(item, 'MAIL')" :class="['tab-item', item.type === 'MAIL' ? 'active' : '']">
            <img  style="margin: 0.2rem" class="svg-icon height_28px" src="@/assets/emails.svg" alt="">
            Mail
          </div>

        </div>
        <div class="tab" v-show="item.type === 'CHAT'">
          <div @click="handleChangeChatHandle(item, subitem.value)" v-for="subitem in chatHandleOptions" :key="subitem.id" :class="['tab-item', item.chatHandle === subitem.value ? 'active' : '']">
            {{ subitem.label }}
          </div>
        </div>
        <div class="tab" v-show="item.type === 'MAIL'">
          <div @click="handleChangeMailHandle(item, subitem.value)" v-for="subitem in mailHandleOptions" :key="subitem.id" :class="['tab-item', item.mailHandle === subitem.value ? 'active' : '']">
            {{ subitem.label }}
          </div>
        </div>
        <div class="chat-online-switch" v-if="item.type === 'CHAT' && item.chatHandle !== 'PD_SEARCH'">
          <div class="chat-online-switch-box">
            <div class="chat-online-switch-wrapper">
              {{ $t('OnlineOnly') }}
              <el-switch class="switch" v-model="item.onlineOnly" size="mini" @change="initChatList(item)"></el-switch>
            </div>
          </div>
        </div>
        <el-input
            v-if="item.type === 'CHAT' && item.chatHandle === 'PD_SEARCH'"
            class="dark_input"
            :placeholder="$t('Search customers by id')"
            prefix-icon="el-icon-search"
            v-model="item.customerIds">
        </el-input>
      </div>
      <div class="chat-list" v-show="!item.isCollapse && item.type === 'CHAT'">
        <div class="chat-dialog"
             @click="handleClickChatDialog(item, dialogItem)"
             v-for="dialogItem in item.chatList" :key="dialogItem.customer.id">
          <img class="custormer-avatar" :src="dialogItem.customer.photo" alt="">
          <div class="customer-name">{{ dialogItem.customer.name }}</div>
          <div class="customer-right">
            <div class="customer-id">{{ dialogItem.customer.id }}</div>
            <img class="mat-tooltip-trigger svg-icon height_16px" :src="dialogItem.followed | followedIcon" >
            <img class="mat-tooltip-trigger svg-icon height_16px" :src="dialogItem.liked | likedIcon" >
            <div class="create_date">
              {{ dialogItem.createdDate | formatDate }}
            </div>
          </div>

        </div>
      </div>
      <div class="mail-list"  v-show="!item.isCollapse && item.type === 'MAIL'">
        <div class="mail-item"
             @click="handleClickMailDialog(item, emailItem)"
             v-for="emailItem in item.mailList" :key="emailItem.createdDate">
          <div class="mail-item-profile">
            <img :src="emailItem.customer.photo" alt="">
            <div class="mail-item-profile-date">{{ emailItem.createdDate | formatDate }}</div>
          </div>
          <div class="mail-item-content">
            <div class="customer-name">{{ emailItem.customer.name }}</div>
            <div class="custormer-mes" v-html="emailItem.content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { formatDate } from '@/utils'
const followed_icon = require('@/assets/followed.svg')
const followed_active_icon = require('@/assets/followed_active.svg')
const liked_icon = require('@/assets/heart.svg')
const liked_active_icon = require('@/assets/heart_active.svg')
export default {
  filters: {
    formatDate: formatDate,
    followedIcon(value) {
      if (value) {
        return followed_active_icon
      }
      return followed_icon
    },
    likedIcon(value) {
      if (value) {
        return liked_active_icon
      }
      return liked_icon
    }
  },
  props: {
    searchValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chatHandleOptions: [
        { value: 'PD_ACTIVE', label: this.$t('Active')},
        { value: 'PD_SAVED', label: this.$t('Saved')},
        { value: 'PD_ALL_CHATS', label: this.$t('All Chats')},
        { value: 'PD_SEARCH', label: this.$t('Search')},
      ],
      mailHandleOptions: [
        { value: 'PD_INBOX', label: this.$t('PD_INBOX')},
        { value: 'PD_OUTBOX', label: this.$t('PD_OUTBOX')},
      ],
      profileList: []
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    assignedProfiles() {
      return (this.userInfo.assignedProfiles || [])
    },
    profileShowList() {
      // 根据searchValue筛选
      if (this.searchValue) {
        return this.profileList.filter(el => {
          return (el.name || '').toLowerCase().includes(this.searchValue.toLowerCase())
        })
      }
      return this.profileList
    }
  },
  watch: {
    assignedProfiles: {
      handler(val) {
        this.profileList = val.map(el => {
          return {
            ...el,
            photo: el.photo,
            loading: false,
            onlineOnly: true,
            isCollapse: true,
            type: 'CHAT',
            chatHandle: 'PD_ACTIVE',
            mailHandle: 'PD_INBOX',
            customerIds: '',
            chatList: [],
            mailList: [],
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleCollapse(item) {
      item.isCollapse = !item.isCollapse
      if (item.loading) return
      if (!item.isCollapse) {
        if (item.type === 'CHAT') {
          this.initChatList(item)
        } else {
          this.initMailList(item)
        }
      }
    },
    // 初始化聊天列表
    initChatList(item) {
      this.getChatList(item)
    },
    // 获取聊天列表方法
    getChatList(item) {
      item.loading = true
      item.chatList = [] // 聊天列表
      console.log(item)
      if (item.chatHandle === 'PD_SEARCH') {
        this.$http.getSearchChatList({
          profile: item.id,
          customerIds: item.customerIds
        }).then( res => {
          item.loading = false
          item.chatList = res.dialogs.map(el => {
            return {
              ...el,
            }
          })
        })
      } else {
        this.$http.getChatList({
          profile: item.id,
          criteria: item.chatHandle,
          online: item.onlineOnly,
          cursor: ''
        }).then( res => {
          item.loading = false
          item.chatList = res.dialogs.map(el => {
            return {
              ...el,
            }
          })
        })
      }
    },
    // 初始化邮件列表
    initMailList(item) {
      this.getMailList(item)
    },
    // 获取邮件列表方法
    getMailList(item) {
      item.loading = true
      item.mailList = [] // 邮件列表
      this.$http.getMailList({
        profile: item.id,
        criteria: item.mailHandle,
        offset: '0'
      }).then(res => {
        item.loading = false
        item.mailList = res
      })
    },
    handleChangeType(item, value) {
      item.type = value
      if (value === 'CHAT') {
        this.initChatList(item)
      } else {
        this.initMailList(item)
      }
    },
    handleChangeChatHandle(item, value) {
      item.chatHandle = value
      this.initChatList(item)
    },
    handleChangeMailHandle(item, value) {
      item.mailHandle = value
      this.initMailList(item)
    },
    handleClickChatDialog(profile, item) {
      this.$emit('change', {
        type: 'CHAT',
        profileId: profile.id,
        customerId: item.customer.id,
      })
    },
    handleClickMailDialog(profile, item) {
      this.$emit('change', {
        type: 'MAIL',
        profileId: profile.id,
        customerId: item.customer.id,
      })
    },
  }
}
</script>

<style scoped lang="scss">
.chat-item {
  flex-grow: 1;
  overflow: auto;
  .mail-list {
    display: flex;
    flex-direction: column;
    gap: 0.143rem;
    padding:0 0.8rem 0.5rem 0.8rem;
    font-size: min(1rem,.729vw);
    .mail-item {
      display: flex;
      grid-template-columns: 1fr 5fr 1fr;
      gap: 0.5rem;
      align-items: center;
      width: 100%;
      height: 3.786rem;
      padding: 0.286rem 0.215rem;
      cursor: pointer;
      border-radius: 0.571rem;
      background-color: #122a3a;
      text-shadow: 2px 1px 3px rgba(173,154,153,.27);
      &:hover {
        background-color: #1d3b4e;
      }
      .mail-item-content {
        display: flex;
        flex: 1 0 50%;
        flex-direction: column;
        gap: 0.357rem;
        padding-right: 0.357rem;
        overflow: hidden;
        color: #fff;
        text-align: justify;
        .customer-name {
          display: flex;
          color: #dfdfdf;
          font-size: .786rem;
          line-height: 100%;
          white-space: nowrap;
        }
        .custormer-mes {
          isplay: -webkit-box;
          height: 1.5rem;
          opacity: .5;
          font-weight: 400;
          line-height: 100%;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .mail-item-profile {
        display: flex;
        flex-direction: column;
        gap: 0.286rem;
        align-items: center;
        justify-content: center;
        width: -moz-fit-content;
        width: fit-content;
        img {
          box-sizing: content-box;
          width: 2.286rem;
          height: 2.286rem;
          border-radius: 0.571rem;
        }
        .mail-item-profile-date {
          opacity: .5;
          color: #fff;
          font-size: .5rem;
          line-height: 100%;
          text-align: center;
        }
      }
    }
  }
  .chat-list {
    display: flex;
    flex-direction: column;
    gap: 0.143rem;
    padding:0 0.8rem 0.5rem 0.8rem;
    font-size: min(1rem,.729vw);
    .chat-dialog {
      display: flex;
      gap: 0.429rem;
      align-items: center;
      padding: min(0.286rem,0.208vw) min(1.143rem,0.833vw) min(0.286rem,0.208vw) min(0.286rem,0.208vw);
      cursor: pointer;
      border-radius: 0.571rem;
      background: #122A3A;
      color: #d5d5d5;
      &:hover {
        background-color: #2b4353;
      }
      .custormer-avatar {
        width: min(2.286rem,1.667vw);
        height: min(2.286rem,1.667vw);
        border-radius: 0.571rem;
      }
      .customer-name {
        display: -webkit-box;
        width: min(10.714rem,7.813vw);
        overflow: hidden;
        color: #d5d5cb;
        font-family: Manrope,sans-serif;
        font-size: .929rem;
        text-align: start;
        text-overflow: ellipsis;
        letter-spacing: .01em;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-break: anywhere;
      }
      .customer-right {
        display: flex;
        gap: min(calc(10 / 14 * 1rem),calc(10 / (1920 / 100) * 1vw));
        align-items: center;
        margin-left: auto;

      }
      .customer-id {
        width: 8ch;
        color: #ffffff80;
        font-size: min(.929rem,.677vw);
        font-weight: 100;
      }
      .create_date {
        width: min(4.643rem,3.385vw);
        font-size: min(.714rem,.521vw);
        font-weight: 100;
        text-align: end;
      }
    }
  }
  .tab {
    display: flex;
    align-items: center;
    border-radius: 0.571rem;
    justify-content: space-between;
    width: 100%;
    height: 2.286rem;
    background-color: #122a3a;
    text-align: center;
    margin-bottom: 0.2rem;
    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      height: 100%;
      cursor: pointer;
      &.active {
        background: #2B4353;
        color: #bdeaff;
        border-radius: 0.571rem;
      }
    }
  }

  .collapse-item {
    background-color: #193343;
    border-radius: 0.571rem;
    .el-icon-arrow-down {
      color: #67CAE8;
      font-weight: bold;
    }
  }
  .profile-body {
    padding: 0.5rem 0.8rem;
  }
  .profile-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    padding: 0 0.571rem;
    cursor: pointer;
    border-radius: 0.571rem;
    &:hover {
      background-color: #1d3b4e;
    }
    .profile-header {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      width: 100%;
      padding: 0.571rem;
      cursor: pointer;
    }
    .profile-info {
      display: flex;
      gap: 0.286rem;
      align-items: center;
      white-space: nowrap;
    }
    .el-icon-arrow-down {

    }
    .profile-control {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(2rem,1.458vw);
      height: min(2rem,1.458vw);
      border-radius: 50%;
      background-color: #2b4353;
      color: #d5d5d5;
      font-size: min(1rem,.729vw);
      font-weight: 500;
    }
    .profile-info {
      display: flex;
      gap: 0.286rem;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      .profile-name {
        display: block;
        width: min(17.857rem,13.021vw);
        overflow: hidden;
        color: #dfdfdf;
        font-size: min(1.143rem,.833vw);
        font-weight: 600;
        line-height: 100%;
        text-align: start;
        text-overflow: ellipsis;
        letter-spacing: .01em;
      }
    }
    .profile-avatar {
      position: relative;
      margin-right: min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw));
      img {
        border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
        object-fit: cover;
      }
      .profile-status {
        position: absolute;
        right: 0;
        bottom: 1px;
        width: 1rem;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #0E222E;
        .profile-status-value {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          width: 66%;
          height: 66%;
          cursor: pointer;
          border-radius: 50%;
        }
      }
    }
  }
  .chat-online-switch {
    background-color: #122a3a;
    border-radius: .571rem;
    overflow: hidden;
    .chat-online-switch-box {
      display: flex;
      flex-direction: column;
      gap: 0.143rem;

      font-size: min(1rem,.729vw);
      .chat-online-switch-wrapper {
        height: 1.714rem;

        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.215rem;
        padding: 0.429rem 0.429rem 0.429rem 1.429rem;
        background-color: #122a3a;
        color: #68a7c0;
        font-size: .857rem;
        font-weight: 500;
        line-height: 100%;
      }
      .chat-online-switch-tag {
        color: #68a7c0;
        .chat-online-switch-tag-check {
          display: flex;
          width: 2.286rem;
          margin-left: auto;
          cursor: pointer;
          border: 1px solid #1C7292;
          border-radius: 0.429rem;
          background-color: #1c729233;
          &.switch-on {
            animation: _ngcontent-ng-c3733759371_switch-on .25s linear forwards;
          }
          &.switch-off {
            animation: _ngcontent-ng-c3733759371_switch-off .25s linear forwards;
          }
          @keyframes _ngcontent-ng-c3733759371_switch-on {
            100% {
              border: 1px solid #67CAE8;
            }
          }
          @keyframes _ngcontent-ng-c3733759371_switch-off {
            100% {
              border: 1px solid #1C7292;
            }
          }
        }
      }
    }
  }
}
</style>